<template>
  <div class="dialog-table-box">
    <el-dialog
      v-model="visible"
      title="导入表"
      width="60%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      append-to-body
    >
      <ProTable
        ref="proTableRef"
        :indent="20"
        :columns="columns"
        :request-api="getTableList"
        row-key="tableName"
      >
      </ProTable>

      <template #footer>
        <el-button type="primary" @click="handleSubmit"> 确定</el-button>
        <el-button @click="visible = false"> 取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import ProTable from '@/components/ProTable/index.vue'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import type { IGenerator } from '@/api/interface/toolbox/generator'
import { getGeneratorSchemaList, importGenerator } from '@/api/modules/toolbox/generator'
import type { IPageQuery } from '@/api/interface'
import { ref } from 'vue'

defineOptions({
  name: 'Import'
})

const emits = defineEmits<{
  finished: []
}>()

const visible = ref(false)

// 接收父组件传过来的参数
const show = () => {
  visible.value = true
}

defineExpose({
  show
})

// 表格配置项
const columns: ColumnProps<IGenerator.Info>[] = [
  { type: 'selection', width: 80 },
  { prop: 'tableName', label: '表名称' },
  { prop: 'tableComment', label: '表描述' },
  { prop: 'createTime', label: '创建时间' },
  { prop: 'updateTime', label: '修改时间' }
]

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref<ProTableInstance>()

// 获取table列表
const getTableList = (params: IPageQuery) => getGeneratorSchemaList(params)

const handleSubmit = () => {
  const ids = proTableRef.value!.selectedListIds
  if (ids.length <= 0) return
  importGenerator({ tableName: ids }).then(() => {
    visible.value = false
    emits('finished')
  })
}
</script>

<style scoped lang="scss"></style>
